<template>
  <div style="margin: 6px">
    <el-card :body-style="{ padding: '20px' }" class="js">
      <div slot="header" class="clearfix">
        <span>快捷入口</span>
      </div>
      <div class="rk">
        <div @click="$router.push('/quick')">
          <img src="@/assets/images/report/rl.png">
          <span>进件列表</span>
        </div>
<!--        <div @click="addReferOpen=true">-->
<!--          <img src="@/assets/images/report/ljg.e0e33905.png">-->
<!--          <span>邀请进件</span>-->
<!--        </div>-->
        <div v-has-role="['admin','common']" @click="$router.push('/charge')">
          <img src="@/assets/images/report/lje.59b6af0b.png">
          <span>查询记录</span>
        </div>
        <div v-has-role="['admin']" @click="$router.push('/system/user')">
          <img src="@/assets/images/report/smjg.png">
          <span>商户管理</span>
        </div>
        <div @click="fastPay">
          <img src="@/assets/images/report/mon.png">
          <span>余额: {{ zeroTwo(balance) }}</span>
          <span style="font-size: 10px">{{$auth.hasRole("common")?'点击充值':''}}</span>
        </div>
        <div @click="handleResetPwd()">
          <img src="@/assets/images/report/ychk.png">
          <span>修改密码</span>
        </div>
      </div>
    </el-card>

    <el-card :body-style="{ padding: '20px' }" v-has-role="['admin']" class="js">
      <div slot="header" class="clearfix">
        <span>运营数据统计</span>
      </div>
      <div class="rk">
        <el-statistic title="累计商户">
          <template slot="formatter">
            {{ sta.suc }}
          </template>
        </el-statistic>
        <el-statistic title="累计进件">
          <template slot="formatter">
            {{ sta.sqc }}
          </template>
        </el-statistic>
        <el-statistic title="累计查询">
          <template slot="formatter">
            {{ sta.scc }}
          </template>
        </el-statistic>
        <el-statistic title="上游接口调用量">
          <template slot="formatter">
            {{ sta.scv }}
          </template>
        </el-statistic>
      </div>
    </el-card>

    <el-row :gutter="5">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card :body-style="{ padding: '25px' }" class="js">
          <div slot="header">
            <span>扫码了解微信小程序</span>
          </div>
          <div>
            <img
              src="@/assets/images/_source3.jpg"
              alt="donate"
              width="100%"/>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card :body-style="{ padding: '25px' }" class="js">
          <div slot="header">
            <span>通知</span>
          </div>
          <p class="tz" v-for="(item,index) in news">
            {{ index + 1 + '. ' + item.noticeTitle }}
            <span style="font-size: 12px">-{{ item.createTime }}</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加或修改进件记录对话框 -->
    <el-dialog title="邀请进件" :visible.sync="addReferOpen">
      <inviteAdd/>
    </el-dialog>

    <el-dialog title="自助充值" :visible.sync="openPay" :destroy-on-close="true" :close-on-click-modal="false">
      <pay v-if="openPay"/>
    </el-dialog>
  </div>
</template>

<script>
  import {statistics, resetUserPwd, newNotice} from "@/api/system/user"
  import {getBalance} from "@/api/system/user";
  import inviteAdd from "@/views/components/inviteAdd.vue"
  import pay from "@/views/components/pay.vue"

  export default {
    components: {inviteAdd, pay},
    data() {
      return {
        sta: {
          scc: null,
          scv: null,
          sqc: null,
          suc: null
        },
        openPay: false,
        addReferOpen: false,
        news: [],
        balance: undefined
      }
    },
    created() {
      console.log(this.$store)
      if (this.$auth.hasRole("admin")) {
        statistics().then(response => {
          this.sta = response.data
        })
      }
      newNotice().then(response => {
        this.news = response.data
      })
      getBalance().then(response => {
        this.balance = response.data
      })
    },
    methods: {
      fastPay(){
        if (this.$auth.hasRole("common")) {
          this.openPay= true
          statistics().then(response => {
            this.sta = response.data
          })
        }
      },
      handleResetPwd() {
        this.$prompt('请输入"' + this.$store.getters.name + '"的新密码', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          inputPattern: /^.{5,20}$/,
          inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
          inputValidator: (value) => {
            if (/<|>|"|'|\||\\/.test(value)) {
              return "不能包含非法字符：< > \" ' \\\ |"
            }
          },
        }).then(({value}) => {
          resetUserPwd(this.$store.state.user.id, value).then(response => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          })
        })
      }
    }
  };
</script>
<style scoped>
  p {
    font-size: 14px;
  }

  .rk {
    display: flex;
    justify-content: space-around;
  }

  .rk div {
    display: inline-block;
    width: 120px;
  }

  .rk img {
    margin: 5px 35px;
    width: 46px;
    height: 46px;
  }

  .rk span {
    display: block;
    text-align: center;
    font-size: 14px;
  }

  .rk i {
    color: #0d99fd;
  }

  .js {
    margin: 4px 4px 0 0;
  }

  .tz {
    font-size: 14px;
    margin: 10px 30px
  }

  ::v-deep .my_dialog .el-dialog__body {
    padding: 12px 22px;
  }
</style>

